<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>3D</title>
</head>
<style>
    .baba {
        width: 400px;
        height: 400px;
        text-align: center;
        line-height: 400px;
        font-size: 48px;
        font-family: cursive;
        color: #ffffff;
        position: absolute;
        top: 50%;
        left: 50%;
        transition: 3s ease;
        transform: translate(-50%, -50%) rotateX(30deg) rotateY(30deg);
        /* background-color: black; */
        transform-style: preserve-3d;
        /* 设置3d一定要声明环境 */
    }

    .facet {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    .front {
        background-color: #838383;
        transform: translateZ(200px);
    }

    .right {
        background-color: #804646;
        transform: rotateY(90deg) translateZ(200px);
    }

    .back {
        background-color: #87ce87;
        transform: rotateY(180deg) translateZ(200px);
    }

    .left {
        background-color: #87cd12;
        transform: rotateY(-90deg) translateZ(200px);
    }

    .top {
        background-color: #892318;
        transform: rotateX(90deg) translateZ(200px);
    }

    .bottom {
        background-color: #87ceeb;
        transform: rotateX(-90deg) translateZ(200px);
    }
</style>

<body>
    <div class="baba">
        <div class="facet front">房喝</div>
        <div class="facet right">房喝</div>
        <div class="facet back">房喝</div>
        <div class="facet left">刘红喝</div>
        <div class="facet top">房喝</div>
        <div class="facet bottom">房喝</div>
    </div>
    <script>
        var dice = document.querySelector(".baba"),
            x=y=x_round=y_round=x_deg=y_deg=x_end=y_end=0;
        // round 转的圈数x_end=y_end
        // deg  当前的角度
        // end  结束的角度
        dice.addEventListener("click", function () {
            var num = (Math.floor(Math.random() * 6)) + 1;//随机数
            x_round = (Math.floor(Math.random() * 6)) + 4;//x轴转动的圈数
            y_round = (Math.floor(Math.random() * 6)) + 4;//y轴转动的圈数

            switch (num) {
                case 1:
                    x=270,x_roundy=0;
                    break;
                case 2:
                    x=y=0;
                    break;
                case 3:
                    x=0,y=270;
                    break;
                case 4:
                    x=0,y=180;
                    break;
                case 5:
                    x=0,y=90;
                    break;
                default:
                   x=90,y=0;
                    break;
            }
            x_end = 360*x_round +x;
            y_end = 360*y_round +y;

            dice.style.transform = `translate(-50%, -50%) rotateX(${x_end}deg) rotateY(${y_end}deg)`;
        })
    </script>
</body>

</html>